<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #666;
        }

        #log-pointer {
            width: 30px;
            height: 30px;
            position: absolute;
            right: 20px;
            bottom: 20px;
            display: none;
        }

        #game {
            width: 900px;
            height: 500px;
            position: relative;
            overflow: hidden;
            margin: 50px auto;
            border: solid 5px rgba(250, 0, 0, 0.5);
            background: url('./img/b1.jpg') center;
            background-size: 100% 100%;
        }

        #btnStart {
            width: 200px;
            border: none;
            background: rgba(0, 0, 0, 0.2);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            padding: 10px 0;
            color: #fff;
            font-size: 24px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.4s;
        }

        #btnStart:hover {
            background: rgba(0, 0, 0, 0.4);
        }

        #textLog {
            position: absolute;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.8);
            bottom: 20px;
            padding: 30px 20px;
            z-index: 9999999999;
            font-size: 20px;
            transition: all 0.5s;
            opacity: 0;
        }

        .log-item {
            opacity: 0;
            transition: all 0.2s;
        }

        #textLog button {
            border: none;
            background: none;
            border-bottom: solid 2px transparent;
            transition: all 0.5s;
            outline: none;
            margin: 10px;
            font-size: 20px;
            color: rgb(98, 98, 240);
            padding: 5px 10px;
            cursor: pointer;
        }

        #textLog button:hover {
            transform: scale(1.2);
            color: #00f;
        }

        #main-bg {
            width: 100%;
            height: 100%
        }

        .sz {
            border: solid 4px #070707;
            margin: 2px;
            width: 30px;
            display: inline-block;
            border-radius: 8px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <!-- 调用函数 开始游戏 -->
    <div id="game">
        <button id="btnStart" onclick="startGame()">开始游戏</button>
        <div id="textLog"></div>
    </div>
    <script src="./engine.js"></script>
    <!-- 引入赌场js文件 -->
    <script src="./duchang.js"></script>
    <script>

        /*
           介绍性输出内容
           遇到流氓干坏事儿
           ?是否上前制止
               是->会和敌人战斗(输出打败的提示)
           一路大摇大摆的进了城
           居然遇到一个乞丐在乞讨
           ?是否要给钱
               是->获取很多报酬
           走着走着饿了 进入酒楼吃饭
           居然和一个有权势的公子发生了矛盾
               ？如果之前有帮助救人 
                   有救 - 直接没有矛盾并可获得资源
                   没有 - 直接被打得奄奄一息
                       ? 是否施舍过乞丐
                           没有 直接死掉
                           有   还是普通人 过完一生
               
               -- 有救人并施舍过 很快变成了 富可敌国的高手 
       */
        var nickname = "";//角色昵称
        var xue = 500, gongji = 100, qian = 1000;// 人物相关数据
        // 统一暂停时间长度
        var stopTime = 1200;
        /**
         * sleep(time) 暂停 需要await
         * write(str,isAppend) 写内容到场景中
         * 
         * url:MP3路径 auto:是否自动播放 loop：是否循环
         * playMusic(url,auto,loop) // 播放音乐
         * stopMusic() // 停止播放音乐
         * 
         * url:图片路径 resize:缩放的倍数
         * var img = DrawBackgroundImage(url,resize) // 画背景图
         * 
         * n:表示缩放倍数 time:缩放的时间 默认1s
         * img.resize(n,time)  // 缩放背景图 需要await
         * 
         * url:图片路径 x:图片距离左边值 y:图片举例上边的值
         * var i1 = DrawImage(url,x,y) // 画普通图片
         * 
         * i1.delete() // 删除图片
         */
        // 整个游戏入口
        async function main() {
            // 播放音乐
            playMusic('mp3/bg.mp3', false, true);

            // 画背景图
            var img = DrawBackgroundImage('img/bg.jpg', 1.2)
            await write('天空一声巨响，一个划时代的人物闪亮登场了...', true, true)
            // 对背景图进行放大到1.5倍
            await img.resize(1.5);
            await sleep(1000);
            // 重新缩小到原始大小 1倍
            await img.resize(1);
            // 画普通的图片
            var p1 = DrawImage('img/p1.png', 500, 150)
            await sleep(2000);
            // p1.delete();//删除

            nickname = prompt('请问大侠名号:');
            write('哦，原来是鼎鼎大名的' + nickname, true); // 追加
            await sleep(1000);

            // 进入剧情
            DrawBackgroundImage('img/liumang_bg.jpg')
            await write('哦，今天的天气真好啊，需要出去逛逛...', false, true)
            await write('是时候展示我绝世美颜的时候了~', true, true);
            p1.delete();
            // 进入打流氓的剧情
            daliumang();
        }
        // 战斗过程
        async function daLiuManging(isZhizhi) {
            write('开始大流氓了');
            if (isZhizhi == 'y') {
                playMusic('mp3/shengli.mp3', true, false)
                write('经过一番打斗，终于赶走流氓!', true)
                await sleep(stopTime);
                write('“谢谢公子的救命之恩!”', true);
                await sleep(stopTime);
                gongji += 500;
                qian += 2000;
                xue += 50;
                write('由于你搭救了未曾相识的人,系统觉得你很帅所以给你加500攻击，2000铜板，50血量', true);

                qigai();
            } else {
                //
                girlImage.delete();
                gotoDuchang();
            }
        }
        var girlImage = null;
        // 进入打流氓的剧情
        async function daliumang() {
            girlImage = DrawImage('img/p2.png', 100, 150)
            write('“咦，前面好像有一个流氓在调试一位美丽姑娘?”')
            await sleep(stopTime);
            write('是否上前制止?', true);
            write(`<button onclick="daLiuManging('y')">是</button>
            <button onclick="daLiuManging(\'no\');">我眼里只有色子</button>`, true)
        }
        // 乞丐剧情
        async function qigai() {
            write('居然遇到了一个乞丐', true)
        }

        // 进入赌场
        async function gotoDuchang() {
            DrawBackgroundImage('img/duchang.jpg');
            write('你要玩什么游戏?')
            await write(`
                <button onclick="playDaXiao()">买大小</button>
                <button>买单双</button>
                <button>买十二生肖</button>
                <button>牌九</button>
            `, true)
        }
    </script>
</body>

</html>